<template>
  <div>
    <el-dialog
      title="活动注册列表"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :show-close="true"
      width="63%"
    >
      <el-form :inline="true" label-width="100px" class="demo-ruleForm">
        <el-form-item label="购买状态" prop="isOrdered">
          <el-select v-model="isOrdered" placeholder="请选择">
              <el-option value="" label="全部"></el-option>
            <el-option value="true" label="已购买"></el-option>
            <el-option value="false" label="未购买"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList()">搜索</el-button>
        </el-form-item>
      </el-form>
      <!-- 列表 -->
      <el-card class="box-card">
        <div class="boxcard-body">
          <div class="tableList">
            <el-table :data="list" border style="width: 100%">
              <el-table-column type="index" label="排序" width="50"></el-table-column>
              <el-table-column prop="avatarUrl" label="头像" width="100">
                <template slot-scope="scope">
                  <img :src="scope.row.avatarUrl" width="80" height="80" />
                </template>
              </el-table-column>
              <el-table-column prop="name" label="客户名称" width="150" show-overflow-tooltip></el-table-column>
              <el-table-column prop="createdDate" label="注册时间" width="130" show-overflow-tooltip></el-table-column>
              <el-table-column prop="allTotal" label="消费金额" width="150" show-overflow-tooltip></el-table-column>
              <el-table-column prop="totalCredits" label="累计积分" width="150" show-overflow-tooltip></el-table-column>
              <el-table-column
                prop="availableCredits"
                label="剩余积分"
                width="150"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column prop="isOrdered" label="是否购买" width="150" show-overflow-tooltip>
                  <template slot-scope="scope">
                      {{scope.row.isOrdered===true?'已购买':'未购买'}}
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagination">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="pageChange"
                :total="total"
                :current-page.sync="pageNum"
                :page-sizes="[10, 20]"
                :page-size="10"
                layout="total, sizes, prev, pager, next"
              ></el-pagination>
            </div>
          </div>
        </div>
      </el-card>
    </el-dialog>
  </div>
</template>

<script>
import { get, postJson, postXform } from "@/utils/request.js";
export default {
  // id即编辑的id，visible属性用来监听是否显示弹窗
  props: ["id", "visible"],
  watch: {
    id: function() {
      let that = this;
      if (that.id) {
        that.getList();
      }
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(value) {
        this.$emit("update:visible", value);
      }
    }
  },
  data() {
    return {
      // 分页参数
      pageNum: 1, // 当前页数
      pageSize: 10, // 页大小
      total: 0, // 数据总条数
      list: [], // 数据列表
      // 弹窗相关属性
      dialogFieldBox: false,
      isOrdered: null
    };
  },
  methods: {
    // 分页相关方法
    // 页大小改变时
    handleSizeChange(val) {
      this.pageSize = val;
    },
    // 页码改变时
    pageChange(e) {
      // 获取某页数据
      this.pageNum = e;
      this.getList();
    },
    getList() {
      get("checkactivity/pageCustomer", {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        activityId: this.id,
        isOrdered: this.isOrdered
      }).then(res => {
        this.list = res.data.data.list;
        // 自定义下标
        this.list.forEach((e, idx) => {
          e.idx = (idx + 1) * this.pageNum;
        });
        this.total = Number.parseInt(res.data.data.total);
        this.pageNum = res.data.data.pageNum;
      });
    }
  },
  mounted() {}
};
</script>

<style lang="less">
</style>
